<template>
  <div class="btn-more-wrap">
    <router-link v-if="type === 'link'" class="btn-more" :class="colorType" :to="to">
      <span>{{text}}</span>
    </router-link>
    <button v-else class="btn-more" :type="type" :disabled="disabled">{{text}}</button>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    text: {
      type: String,
      default: "Learn More"
    },
    to: {
      type: [String, Object],
      default: "#"
    },
    colorType: {
      type: String,
      default: "primary"
    },
    type: {
      type: String,
      default: "link"
    },
    disabled: {
      type: Boolean,
      default: true
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-more-wrap {
  display: inline-block;
  vertical-align: top;
  background-color: #000;

  &:hover {
    .btn-more {
      transform: translate(-4px, -4px);
    }
  }
  .btn-more {
    position: relative;
    display: block;
    padding-right: 130px;
    min-width: 260px;
    height: 60px;
    padding-left: 40px;
    transition: all 0.3s ease;
    font: 300 16px/60px "Futura";
    letter-spacing: 0.02em;
    border: 0;
    cursor: pointer;
    outline: 0;
    background-color: $primary;
    color: white;
    &.plain {
      color: #202020;
      background-color: #fff;
    }
    &:disabled {
      background-color: grayscale($primary);
    }
    &::after {
      content: "\e606";
      position: absolute;
      top: 0;
      right: 32px;
      font-family: "iconfont";
      font-size: 56px;
      line-height: 60px;
    }
  }
}
</style>
